<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="todo-app">
    <div class="title">TO DO APP</div>
    <div class="todo-from">
        <input class = "todo-input" type="text" placeholder="add to do something">
        <div class="todo-bottom ">add to do</div>
    </div>
        <div class="item complete">
            <div>
                <input type="checkbox"  />
                <span class="name">吃饭</span>
            </div>
            <div class="del">del</div>
        </div>
    <div class="item">
        <div>
            <input type="checkbox"  />
            <span class="name">吃饭</span>
        </div>
        <div class="del">del</div>
    </div>
    <div class="item">
        <div>
            <input type="checkbox"  />
            <span class="name">吃饭</span>
        </div>
        <div class="del">del</div>
    </div>
      </div>
    <style>
        .complete
        {
            text-decoration: line-through;
            opacity:0.4;

        }
        .item
        {
            .del
            {
                color: red;
            }
            align-items: center;
            justify-content: space-between;
            display: flex;
            box-sizing: border-box;
            width: 80%;
            height: 50px;
            margin: 8px auto;
            padding: 16px;
            border-radius: 20px;
            box-shadow: rgb(149,157,165,0.2)0px 8px 20px;


        }
        .todo-bottom
        {
            background: linear-gradient(to right,rgb(113,65,168),rgb(44,144,251,1));
            padding-left: 15px;
            outline: none;
            width:100px;
            height:52px;
            line-height: 52px;
            border-radius: 0 20px 20px 0;
            text-align: center;
            cursor: pointer;
            user-select: none;
            color: #ffffff;
        }

        .todo-input
        {
            margin-bottom: 20px;
            padding-left: 15px;
            border: 1px solid #dfe1e5;
            outline: none;
            width: 60%;
            height:50px;
            border-radius: 20px 0 0 20px;
        }
        .todo-from
        {
            display: flex;
            margin-top: 20px;
            margin-left: 30px;
        }
        body
        {
           background: linear-gradient(to right,purple,pink);
        }
    .todo-app
    {
        width: 98%;
        height: 500px;
        background-color: white;
        border-radius: 5px;
        margin-top: 40px;
        margin-left: 1%;
        padding-top: 30px;
        box-sizing: border-box;
    }
    .title{
        font-size: 30px;
        font-weight: 700;
        text-align: center;

    }



    </style>


</body>
</html>